<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <composition :mess="message" />
  <!-- 组件的双向绑定实际上做了俩件事   默认情况 1给组件传入一个类似props的值modelValue   2监听update:modelValue 并把绑定值赋值给默认传过来的$event-->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App" :modeValue="message" @update:modelValue="message=$event" /> -->
  <HelloWorld
    msg="Welcome to Your Vue.js App"
    v-model:xfy="message"
    v-model="name"
  />
  <div>父组件的message:{{ message }}</div>
  <div>父组件的name:{{ name }}</div>
  <transition>
    <h2 v-if="isShow">组件动画</h2>
  </transition>
  <transition name="xfy">
    <div v-if="show">我是动画组件</div>
  </transition>
  <button @click="isShow = !isShow">改变状态</button>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
import composition from "./components/composition.vue";
export default {
  name: "App",
  components: {
    HelloWorld,
    composition,
  },
  data() {
    return {
      message: "组件的双向绑定211",
      name: "旧的许方言",
      isShow: true,
      show: true,
    };
  },
  created() {
    // setTimeout(() => {
    //   this.show = false;
    // }, 2000);
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
.v-leave-active,
.v-enter-active {
  transition: opacity 2s;
}

.xfy-enter-active,
.xfy-leave-active {
  animation: bounce 3s reverse;
}
@keyframes bounce {
  0% {
    width: 100px;
    background: red;
  }
  25% {
    width: 150px;
    background: yellow;
  }
  50% {
    width: 200px;
    background: pink;
  }
  75% {
    width: 250px;
    background: powderblue;
  }
  100% {
    width: 300px;
    background: purple;
  }
}
</style>
